import { useCounter } from "@/model/context";
import { pokerAwardQtw, pokerAwardWtq, pokerGoodInfo } from "@/service";
import { Button, Form, Input, InputNumber, message, Modal, Select, Tooltip } from "antd";
import React, { useEffect, useState } from "react";

export default function Exchange(props: any) {
  const { open, close, code, chips, getUserInfo } = props;
  const { state: { serverName, serverId } } = useCounter();
  const [messageApi, contextHolder] = message.useMessage();

  const [confirmLoading, setConfirmLoading] = useState(false);
  const [goods, setGoods] = useState<any>(null);
  const [jettonNum, setJettonNum] = useState<any>(null);
  const [goodsNum, setGoodsNum] = useState<any>(null);
  // 物品下拉列表
  const [goodsOptions, setGoodsOptions] = useState<{
    goodId: string;
    goodName: string;
    jettonNum: number | string;
  }[]>([]);

  const [preChips, setPreChips] = useState<any>(null);

  useEffect(() => {
    getGoodsList()
  }, [])

  const getGoodsList = async () => {
    const res = await pokerGoodInfo()
    if (res?.length > 0) {
      setGoodsOptions(res || [])
    }
  }

  const onCancel = () => {
    close();
  };

  const onOk = async () => {
    // 判断 当前物品 和 当前物品数量 是否存在
    if (!goods || !goodsNum) {
      messageApi.error("请选择 物品 和 物品数量");
      return;
    }
    if (code !== "chips" && Number(goodsNum) * Number(jettonNum) > Number(chips)) {
      messageApi.error("当前便便不足，无法兑换")
      return
    }
    console.log(goods, goodsNum);
    if (code == "chips") {
      const res = await pokerAwardWtq({
        serverId,
        goodId: goods,
        num: goodsNum
      })
    } else {
      const res = await pokerAwardQtw({

        serverId,
        goodId: goods,
        num: goodsNum
      })
    }
    getUserInfo()
    getGoodsList()
    onCancel();
  };

  return (
    <Modal
      title={`${code == "chips" ? "存入便便" : "取出物品"}`}
      width={500}
      open={open}
      onCancel={onCancel}
      maskClosable={false}
      className="exchangeModal"
      confirmLoading={confirmLoading}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button
          key="submit"
          type="primary"
          onClick={onOk}
          loading={confirmLoading}
        >
          确定
        </Button>,
      ]}
    >
      <div className="exchangeInner">
        {contextHolder}
        <div className="item">
          <span className="name">当前便便数:</span>
          <Input value={chips} disabled />
        </div>
        <div className="item">
          <span className="name">所属服务器:</span>
          <Input value={serverName} disabled />
        </div>
        <div className="item">
          <span className="name">物品:</span>
          <Select
            fieldNames={{
              label: 'goodName',
              value: 'goodId'
            }}
            allowClear
            options={goodsOptions}
            onChange={(val: any, item: any) => {
              setJettonNum(item?.jettonNum || '')
              setGoods(val || '');
              setGoodsNum(0)
            }}
            placeholder="请选择物品"
          />
        </div>
        <div className="item">
          <span className="name">数量:</span>
          <InputNumber
            value={goodsNum}
            onChange={(val) => {
              setGoodsNum(val);
              setPreChips(jettonNum ? Number(val) * Number(jettonNum) : '')
            }}
            min={0}
            placeholder="请输入数量"
          />
        </div>
        {code == "chips" && (
          <div className="item">
            <Tooltip title="预计可存入便便数量">
              <span className="name">预计可存入便便数量:</span>
            </Tooltip>
            <Input value={preChips} readOnly />
          </div>
        )}
      </div>
    </Modal>
  );
}
